<template>
  <el-dialog :visible.sync="dialogVisible" width="800px" :before-close="handleClose" :close-on-click-modal="false"
    append-to-body :title="title">
    <el-form :model="form" ref="formRef" label-width="90px">
      <el-form-item label="所属学科" prop="department_id"
        :rules="[{ required: true, message: '请选择所属科室', trigger: 'blur' }]">
        <el-select v-model="form.department_id" clearable filterable placeholder="请选择">
          <el-option v-for="item in departmentNameArr" :key="item.name" :label="item.name" :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="科室名称" prop="name" :rules="[{ required: true, message: '请输入科室名称', trigger: 'blur' }]">
        <el-input placeholder="请输入" v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="科室编码" prop="DeptNo" :rules="[{ required: true, message: '请输入科室编码', trigger: 'blur' }]">
        <el-input placeholder="请输入" v-model="form.DeptNo"></el-input>
      </el-form-item>

      <el-form-item label="科室介绍" prop="desc" :rules="[
          { required: true, message: '请输入科室介绍', trigger: 'blur' },
        ]">
        <el-input resize="none" type="textarea" :autosize="{ minRows: 2, maxRows: 4 }" placeholder="请输入"
          v-model="form.desc"></el-input>
      </el-form-item>
      <el-form-item label="问诊价格" prop="price" :rules="[{ required: true, message: '请输入问诊价格', trigger: 'blur' }]">
        <el-input placeholder="请输入" type="number" v-model="form.price"></el-input>
      </el-form-item>
      <el-form-item label="接诊时间" prop="time" :rules="[{ required: true, message: '请输入接诊时间', trigger: 'blur' }]">
        <el-select @change="$forceUpdate()" multiple filterable allow-create v-model="form.time" clearable
          placeholder="请选择">
          <el-option v-for="item in timeArr" :key="item.name" :label="item.name" :value="item.name">
          </el-option>
        </el-select>
      </el-form-item>
      <!--    :rules="[{ required: true, message: '请输入接诊时段', trigger: 'blur' }]" -->
      <el-form-item label="接诊时段" prop="time_range">
        <!--      <el-button type="primary" size="mini" @click="addM">新增</el-button> -->
        <el-form>
          <div v-for="(item, index) in ItemArr" :key="index">
            <el-form-item>
              <el-row :span="24">
                <el-col :span="6">
                  <el-time-picker value-format="HH:mm" size="small" format="HH:mm" v-model="item.value1"
                    placeholder="请选择开始日期"></el-time-picker>
                </el-col>
                <el-col :span="2" style="
                    display: flex;
                    align-items: center;
                    justify-content: center;
                  ">--
                </el-col>
                <el-col :span="6">
                  <el-time-picker value-format="HH:mm" size="small" format="HH:mm" v-model="item.value2"
                    placeholder="请选择结束日期" :picker-options="{
                      selectableRange: `${item.value1 + ':00'}-23:59:59`,
                    }"></el-time-picker>
                </el-col>
                <!--    <el-col :span="2" style="margin-left: 10px;">
                  <el-button type="danger" size="mini" @click="deleM">删除</el-button>
                </el-col> -->
              </el-row>
            </el-form-item>
          </div>
        </el-form>

      </el-form-item>
    </el-form>
    <div slot="footer" class="tx-c">
      <el-button @click="handleClose">取消</el-button>
      <el-button type="primary" @click="confirm" :loading="btnLoading">确认</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { debounce } from "@/util";
import { ApiSubDepartmentEdit, ApiSubDepartmentAdd } from "@/api/index.js";
import ImgUploadPath from "@/components/imgUpload-path.vue";
import { validatePhone } from "@/util/validate";
export default {
  props: ["roleData", "departmentData", "departmentNameArr"],
  components: {
    ImgUploadPath,
  },
  data() {
    return {
      validatePhone,
      ItemArr: [{ value1: '', value2: "" }],
      optionsData: [
        { name: "男", code: "男" },
        { name: "女", code: "女" },
      ],
      timeArr: [
        { name: "周一", code: "周一" },
        { name: "周二", code: "周二" },
        { name: "周三", code: "周三" },
        { name: "周四", code: "周四" },
        { name: "周五", code: "周五" },
        { name: "周六", code: "周六" },
        { name: "周日", code: "周日" },

      ],

      oldform: {
        name: "",
        desc: "",
        price: "",
        time: "",
        time_range: "",
        department_id: '',
        DeptNo:''
      },
      form: {},
      btnLoading: false,
      dialogVisible: false,
      id: null,
      title: "",
      imgsDefalut: [],
      roleArr: [{ name: '医师', code: '医师' }, { name: '护师', code: '护师' }]
    };
  },

  methods: {
    addM() {
      this.ItemArr.push({
        value1: "",
        value2: "",
      });
    },
    deleM() {
      if (this.ItemArr.length > 1) {
        this.ItemArr.pop({
          value1: "",
          value2: "",
        });
      } else {
        this.$alert("最后一个无法删除！", "提示信息", {
          confirmButtonText: "确定",
        });
      }
    },

    onUploadSuccess(path) {
      console.log("111", path);
      this.form.icon = path;
    },
    onUploadRemove() {
      this.form.icon = "";
    },
    confirm: debounce(
      function () {
        this.$refs["formRef"].validate(async (valid) => {
          if (valid) {
            this.btnLoading = true;
            try {
              //时间段转换
              console.log('123111', this.ItemArr)
              if (this.ItemArr.length > 0) {
                this.form.time_range = this.ItemArr[0].value1 + '-' + this.ItemArr[0].value2
              }

              const form = {
                ...this.form,
                time: this.form.time.toString()
              }
              if (this.id) {
                await ApiSubDepartmentEdit(this.id, form);
                this.$message.success("修改成功");
              } else {
                await ApiSubDepartmentAdd(form);
                this.$message.success("添加成功");
                /* this.$alert("添加成功，该员工初始密码为：123456", "提示", {
                  confirmButtonText: "确定",
                  callback: (action) => {},
                }); */
              }

              this.handleClose();
              this.$emit("refresh");
            } finally {
              this.btnLoading = false;
            }
          } else return false;
        });
      },
      500,
      true
    ),

    show(row) {
      const data = row || this.oldform;
      for (const key in this.oldform) {
        this.$set(this.form, key, data[key]);
      }

      if (row) {
        this.id = row.id;
        this.title = "编辑人员";
        //时间段
        if (row.time) {
          this.form.time = row.time.split(',')
        }
        //接诊时间段
        if (row.time_range) {
          let arr = row.time_range.split('-')
          this.ItemArr[0].value1 = arr[0]
          this.ItemArr[0].value2 = arr[1]
        }
        if (row.icon) this.imgsDefalut = [{ url: this.$path + row.icon }];
      } else {
        this.id = null;
        this.title = "添加科室";
      }
      this.dialogVisible = true;
    },

    handleClose() {
      this.dialogVisible = false;
      this.form = { ...this.oldform };
      this.ItemArr = [{ value1: '', value2: '' }]
      this.$nextTick((_) => {
        this.$refs.formRef.clearValidate();
        /*      this.$refs.ImgUploadPath.clear(); */
      });
    },
  },
};
</script>

<style></style>
